<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" href="css/app.css" />-->
		<style>
			.mui-btn {
				padding: 10px;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.hide{
				display: none;
			}
			.null{
				height: 45px;
			}
			#map {
				width: 100%;
				/*height: 100%;*/
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
			
		</style>
	</head>
	
	<body>
	<div id="app">
		<header class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">微定位</h1>
		</header>
		
		<!--            底部导航                       -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-location"></span>
				<span class="mui-tab-label">定位</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">聊天</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		
		<!-- 内容区  -->
		<div class="mui-content">
			<!--             首页                       -->
			<div id="tabbar" class="mui-control-content mui-active">
				<div id="map"></div>
			</div>
			
			<!--           聊天界面                     -->
			<div id="tabbar-with-contact" class="mui-control-content">
				<ul class="mui-table-view topHave">
					<li class="mui-table-view-cell" id="group">群聊</li>
					<li class="mui-table-view-cell" id="contact">通讯录</li>
				</ul>
				<ul class="mui-table-view topHave" >
					<li class="mui-table-view-cell mui-media" v-for="item in chatList" @click="gotoChat(item)">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.headImg">
							<div class="mui-media-body">
								<span v-text="item.name"></span>
								<p class='mui-ellipsis'><span v-if="item.chatUser">{{item.chatUser}}：</span>{{item.lastAsk}}</p>
							</div>
						</a>
					</li>
				</ul>			
			</div>
			
			<!--           我的页面                            -->
			<div id="tabbar-with-map" class="mui-control-content">
				<!--头像-->
				<ul class="mui-table-view topHave">
					<li class="mui-table-view-cell mui-media">
						<a href="#account">
							<img id="head-img" class="mui-media-object mui-pull-left header-img" src="images/cc-head.png" style="height: 60px;max-width: 60px;line-height: 60px;">
							<div class="mui-media-body" style="padding-top: 8px;">
								<span id="account">天涯游客</span>
								<p class='mui-ellipsis' style="margin-top: 2px;">人活着就是应该奋斗，奋斗本身就是一种幸福。</p>
							</div>
						</a>
					</li>
				</ul>				
				
				<ul class="mui-table-view topHave">
				<li class="mui-table-view-cell" id="userInfo">
					<a class="mui-navigate-right">
						个人信息
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						我的轨迹
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						标记地址
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="setting">
						设置
					</a>
				</li>
			</ul>
			<!--<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						关于mui
					</a>
				</li>
			</ul>-->
			<ul class="mui-table-view" style="margin-top: 25px;" id="login">
				<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						登录
					</a>
				</li>
			</ul>
			</div>
		</div>
	</div><!--#app-->
	</body>	
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/h.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1GFjszMOqSYX1Ny1Y5NPWE4G2wGB0Ghx"></script>
<!--	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>-->
		<script>
			mui.init();
//			Vue===
			var vue = new Vue({
				el:"#app",
				data:{
					hello: "Hello World",
					chatList:[
						{
							name: "1舍203",
							chatUser: "露露",
							headImg: "images/cbd.jpg",
							lastAsk: "儿豁",
							lastAskDate: "22:19:53"
						},
						{
							name: "金大爷",
							chatUser: "",
							headImg: "images/shuijiao.jpg",
							lastAsk: "快来吃火锅啊，速推",
							lastAskDate: "22:19:53"
						},
						{
							name: "傻屌",
							chatUser: "",
							headImg: "images/muwu.jpg",
							lastAsk: "马上回寝室来了，您们在寝室没得啊，真的啊的减肥啦",
							lastAskDate: "22:19:53"
						}
					]
				},
				mounted: function(){
					
				},
				methods:{
					gotoChat: function(item){
//						 console.log(JSON.stringify(item));
						 mui.openWindow({
						 	url: "chat.html",
						 	id: "chat.html",
						 	extras: {
						 		chatObj: item
						 	}
						 })
					}
				}
			});					
//			Vue===end============

//			MUI init
			(function($, doc) {
				//百度地图调用===============================start
				//设置地图宽高
				var winWidth = document.documentElement.clientWidth;
				var winHeight = document.documentElement.clientHeight;
				document.getElementById('map').style.height = (winHeight - 97)+'px';			
				
				// 百度地图API功能
				var map = new BMap.Map("map"); // 创建Map实例
				map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
				//添加地图类型控件
				map.addControl(new BMap.MapTypeControl({
					mapTypes: [
						BMAP_NORMAL_MAP,
						BMAP_HYBRID_MAP
					]
				}));
				//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

				//jquery ajax请求，获取该轨迹的数据
				$.ajax({
					url: "http://182.254.233.89:8080/test1/GetPathByIdServlet",
					type: "GET",
					dataType:"json",
					data: "id=abc",
					success: function(obj) {
						//alert(obj);
						//画轨迹
						drawPath(obj);
					}
				});

				function drawPath(obj){
					var pointList=new Array();
					var startPoint = new BMap.Point(obj[0].longitude,obj[0].latitude);
					var endPoint = new BMap.Point(obj[obj.length-1].longitude,obj[obj.length-1].latitude);
					var startMark =new BMap.Marker(startPoint);
					var endMark =new BMap.Marker(endPoint);
					map.addOverlay(startMark);
					map.addOverlay(endMark);
					
					var labelStart = new BMap.Label("起点", {position : startPoint,offset: new BMap.Size(-12, -50) });
					var labelEnd = new BMap.Label("终点", {position : endPoint,offset: new BMap.Size(-12, -50) });

					/*labelStart.setStyle({
						color: "red",
						fontSize: "12px",
						height: "20px",
						lineHeight: "20px",
						fontFamily: "微软雅黑"
					});
					*/
					map.addOverlay(labelStart);
					map.addOverlay(labelEnd);
					
					for(var i=0;i<obj.length;i++){
						var p=new BMap.Point(obj[i].longitude,obj[i].latitude);
						pointList.push(p);
					}

					var polyline = new BMap.Polyline(pointList, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.8}); 
					map.centerAndZoom(startPoint, 8);
					map.addOverlay(polyline);
					
					//定位当前位置
					var geolocation = new BMap.Geolocation();
					// 开启SDK辅助定位
					geolocation.enableSDKLocation();
					geolocation.getCurrentPosition(function(r){
						if(this.getStatus() == BMAP_STATUS_SUCCESS){
							var mk = new BMap.Marker(r.point);
							map.addOverlay(mk);
							map.panTo(r.point);
//							alert('您的位置：'+r.point.lng+','+r.point.lat);
						}
						else {
							alert('failed'+this.getStatus());
						}        
					});
					
				};
				//==============================================end
//				$.init();
				var settings = app.getSettings();
				var account = doc.getElementById('account');
				var headImg = doc.getElementById("head-img");
				//
				window.addEventListener('show', function() {
					var state = app.getState();
					account.innerText = state.account.nickname;
					//qq或微信头像
					headImg.src = state.account.figureurl_qq_2 || state.account.headimgurl;
					if(state.account){
						doc.getElementById("login").style.display = 'none';
					}else{
						doc.getElementById("login").style.display = 'block';
					}
				}, false);
				$.plusReady(function() {
					var loginPage = doc.getElementById("login");
					loginPage.addEventListener("tap",function(){
						$.openWindow({
							url: 'login.html',
							id: 'login.html'
						});
					});
					//预加载设置界面
					var settingPage = $.preload({
						"id": 'setting',
						"url": 'setting.html'
					});
					//========================打开新页面
					//群聊
					var groupBtn = doc.getElementById("group");
					groupBtn.addEventListener('tap', function(){
						$.openWindow({
							id: "group-list.html",
							url: "group-list.html"
						})
					});
					//通讯录
					var contactBtn = doc.getElementById("contact");
					contactBtn.addEventListener('tap', function(){
						$.openWindow({
							id: "contact-list.html",
							url: "contact-list.html"
						})
					});
					//个人信息
					var userInfo = doc.getElementById("userInfo");
					userInfo.addEventListener('tap', function(){
						$.openWindow({
							id: "userInfo.html",
							url: "userInfo.html"
						})
					});
					
					//设置
					var settingButton = doc.getElementById('setting');
					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
					settingButton.addEventListener('tap', function(event) {
						$.openWindow({
							id: 'setting',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					});
					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
</html>